<!-- 社康总数 -->
<template>
  <div class="skTotalView">
    <div class="divFlex">
      <div style="margin-right: 20px">社戒社康总人数</div>
      <el-tooltip
        class="item"
        effect="dark"
        content="统计截止当前时间该区域已录入系统的社戒社康人员总人数"
        placement="right-start"
      >
        <i class="el-icon-warning" />
      </el-tooltip>
    </div>
    <div><count-to :start-val="0" :end-val="total" :duration="1000" />人</div>
  </div>
</template>
<script>
import { getZrs } from "@/api/earlyWarning/sjsk";
import CountTo from "vue-count-to";
export default {
  components: {
    CountTo,
  },
  data() {
    return {
      total: 0,
    };
  },
  mounted() {
    this.request();
  },
  methods: {
    /** 查询社戒社康人员列表 */
    request() {
      getZrs().then((response) => {
        this.total = response.data;
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.skTotalView {
  width: 100%;
  height: calc((100vh - 240px) / 4);
  background: #fff;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  box-shadow: 0px 0px 6px #ccc;
}
.divFlex {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 10px;
}
</style>
